<template>
  <view>
    <view class="uni-header">
      <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
      <view class="uni-group">
        <input class="uni-search" type="text" v-model="condition.keywords" @confirm="search"
          :placeholder="$t('common.placeholder.query')" />
        <button class="uni-button" type="primary" size="mini" @click="search">{{$t('common.button.search')}}</button>
        <button class="uni-button" type="default" size="mini"
          @click="reset">{{$t('common.button.reset')}}{{$t('common.button.search')}}</button>
      </view>
    </view>


    <view class="uni-container">

      <uni-table ref="table" :loading="loading" emptyText="没有更多数据" border stripe>
        <uni-tr>
          <uni-th align="center" width="120">用户</uni-th>
          <uni-th align="center" width="200">操作</uni-th>
          <uni-th align="center" width="120">地址</uni-th>
          <uni-th align="center" width="200">IP地址</uni-th>
          <uni-th align="center" width="200">UA</uni-th>
          <uni-th align="center" width="200">时间</uni-th>
        </uni-tr>
        <uni-tr v-for="(item,index) in items" :key="index">
          <uni-td align="center">{{item.userName}}</uni-td>
          <uni-td align="center">{{item.description}}</uni-td>
          <uni-td align="center">{{item.url}}</uni-td>
          <uni-td align="center">{{item.ip}}</uni-td>
          <uni-td align="center">{{item.userAgent}}</uni-td>
          <uni-td align="center">{{item.gmtCreate}}</uni-td>
        </uni-tr>
      </uni-table>
      <uni-pagination show-icon show-page-size :page-size="pageSize" v-model="pageCurrent" :current="pageCurrent"
        :total="total" @change="changePage" @pageSizeChange="changeSize" />
    </view>
  </view>
  <fix-window />
</template>


<script>
  import {
    mapActions
  } from "vuex"
  export default {
    data() {
      return {
        pageSize: 20,
        pageCurrent: 1,
        total: 0,
        items: [],
        loading: true,
        condition: {
          keywords: "",
        },

      }
    },
    onShow() {
      this.search()
    },
    methods: {
      ...mapActions('userLog', ['list']),

      // 搜索
      search() {
        this.loading = true
        this.items = [];
        let conditionCopy = JSON.parse(JSON.stringify(this.condition))
        conditionCopy.page = this.pageCurrent;
        conditionCopy.limit = this.pageSize;
        this.list(conditionCopy).then(data => {
          this.items = data.list
          this.total = data.count
          this.loading = false
        });
      },
      reset() {
        this.condition.keywords = "";
        this.search();
      },
      changeSize(e) {
        this.pageSize = e;
        this.pageCurrent = 1;
        this.search()
      },
      changePage(e) {
        this.pageCurrent = e.current;
        this.search()
      },
      getSelectIds() {
        if (!this.selectIds.length) {
          uni.showToast({
            title: "请指定操作的记录",
            icon: "none"
          })
          throw new Error("请指定操作的记录");
        }
        return this.selectIds
      },
      selectionChange(e) {
        this.selectIds = []
        e.detail.index.forEach(index => {
          this.selectIds.push(this.items[index].id)
        })
      },
    }
  }
</script>